<template>
	<a-modal :width="850" :visible="visible" title="选择素材" @ok="handleOk" @cancel="handleClose" centered :zIndex="1010">
		<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
			<a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.name">
				<div class="merchant_materials" v-if="item.key == 'merchant_materials'">
					<div class="left_menu">
						<div class="menu_con">
							<div class="menu_item" :class="currentIndex == index ? 'active' : ''"
								@click="chooseLibrary(item, index)" v-for="(item, index) in libraryList" :key="index">
								{{ item.group_name }}</div>
						</div>
					</div>
					<div class="right_material">
						<div class="folder_con" v-if="!showMaterial">
							<folderList @newFolder="newSubFolder" :isLoading="folderLoading" :list="folderData"
								@choose="chooseFolder" />
						</div>

						<div class="material_con" v-else>
							<materialList v-if="visible" @getChoose="getChooseMaterial" @back="showMaterial = false"
								@uploadMaterial="materialVisible = true" :isLoading="materialLoading" :list="materialData"
								@choose="chooseMaterial" />
						</div>
					</div>
				</div>

				<div class="general_materials" v-if="item.key == 'general_materials'">
					<div class="folder_con" v-if="!showMaterial">
						<folderList @newFolder="newSubFolder" :isLoading="folderLoading" :list="folderData"
							@choose="chooseFolder" />
					</div>

					<div class="material_con" v-else>
						<materialList v-if="visible" @getChoose="getChooseMaterial" @back="showMaterial = false"
							@uploadMaterial="materialVisible = true" :isLoading="materialLoading" :list="materialData"
							@choose="chooseMaterial" />
					</div>
				</div>
			</a-tab-pane>
		</a-tabs>
		<!-- 新建文件夹 -->
		<NewFolder :visible="addVisible" :groupData="currentLibrary" @onCancel="addVisible = false"
			@onSubmit="closeAdd" />

		<!-- 上传文件 -->
		<UploadFileModal :visible="materialVisible" :type="currentFolder.folder_type" :fileData="currentFolder"
			@onCancel="materialVisible = false" @onSubmit="closeMaterial" />

		<copperImage @getCropper="getCropper" :visible="copperVisible" @close="copperVisible = false"
			:imageUrl="currentMaterial.material_url" />
	</a-modal>
</template>

<script>
import {
	defineComponent,
	ref,
	reactive,
	toRefs,
	watch
} from 'vue';
import { message } from 'ant-design-vue';
import {
	PlusCircleOutlined,
	PlusOutlined
} from '@ant-design/icons-vue';
import NewFolder from "@/views/shotstack/MaterialCenter/modules/NewFolder.vue";
import store from '@/store';
import request from "@/common/utils/request";
import folderList from './folderList.vue';

import materialList from './materialList.vue';
import UploadFileModal from "../../../../MaterialCenter/modules/UploadFileModal.vue";
import copperImage from './copperImage.vue';
export default defineComponent({
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		isClip: {
			type: Boolean,
			default: true
		},
	},
	components: {
		NewFolder,
		folderList,
		materialList,
		UploadFileModal,
		copperImage
	},
	setup(props, context) {
		const state = reactive({
			activeKey: 'merchant_materials',
			tabList: [{
				name: '项目素材',
				key: 'merchant_materials'
			}, {
				name: '通用素材',
				key: 'general_materials'
			}],
			addVisible: false,
			libraryList: [],
			currentLibrary: {},
			folderLoading: false,
			folderData: [],
			currentFolder: {},
			materialLoading: false,
			materialData: [],
			showMaterial: false,
			materialVisible: false,
			currentMaterial: {},
			currentIndex: 0,
			copperVisible: false
		})

		const handleOk = () => {
			if (!state.currentMaterial?.material_url) {
				message.warn('请先选择一张背景图片')
				return
			}
			if (props.isClip) {
				state.copperVisible = true
			} else {
				context.emit('close', state.currentMaterial)
			}
		}

		const handleClose = () => {
			context.emit('close')
		}

		const newSubFolder = () => {
			if (state.activeKey == 'merchant_materials') {
				state.currentLibrary = state.libraryList[0]
			} else {
				state.currentLibrary = {
					merchant_library_id: 0
				}
			}
			state.addVisible = true
		}

		const closeAdd = () => {
			state.addVisible = false
			if (state.activeKey == 'merchant_materials') {
				getLibraryList(store.getters.clipJSON.merchant_library_id)
			} else {
				state.libraryList = []
				getFolderList({ merchant_library_id: 0 })
			}
		}

		const getLibraryList = (merchant_library_id) => {
			request.get('/work_ai', '/user/shotstack/library/withGroup/list', { merchant_library_id, }).then(res => {
				let index = res.result.findIndex(item => item.id == merchant_library_id)
				if (index != -1) {
					state.libraryList = res.result[index].folder_group
					getFolderList(state.libraryList[0])
				}
			})
		}

		const getFolderList = (params) => {
			let obj = {}
			obj.merchant_library_id = params.merchant_library_id
			obj.folder_use_type = 1
			obj.group_id = params.id
			if (params.material_type) {
				obj.material_type = params.material_type
			}
			obj.material_type = 'image'
			state.folderLoading = true
			state.folderData = []
			request.post('/work_ai', '/user/shotstack/folder/list', obj).then(res => {
				state.folderData = res.result.data
				state.folderLoading = false
			})
		}

		const handleTabChange = (key) => {
			state.showMaterial = false
			if (key == 'merchant_materials') {
				getLibraryList(store.getters.clipJSON.merchant_library_id)
			} else {
				state.currentIndex = 0
				state.libraryList = []
				getFolderList({ merchant_library_id: 0 })
			}
		}

		const chooseFolder = (item) => {
			state.currentFolder = item
			if (item.folder_type == 'text') {
				getTextList({ merchant_folder_statck_id: item.id })
			} else {
				getMediaList({ merchant_folder_statck_id: item.id })
			}
			state.showMaterial = true
		}

		const getMediaList = (params) => {
			state.materialLoading = true
			state.materialData = []
			request.post('/work_ai', '/user/shotstack/media/list', { ...params, pageSize: 1000, page: 1 }).then(res => {
				state.materialData = res.result
				state.materialLoading = false
			})
		}

		const getTextList = (params) => {
			state.materialLoading = true
			state.materialData = []
			request.get('/work_ai', '/user/shotstack/text/list', params).then(res => {
				state.materialData = res.result
				state.materialLoading = false
			})
		}

		const chooseMaterial = (arr) => {
			console.log('arr==>', arr)

		}

		const closeMaterial = () => {
			state.materialVisible = false
			if (state.currentFolder.folder_type == 'text') {
				getTextList({ merchant_folder_statck_id: state.currentFolder.id })
			} else {
				getMediaList({ merchant_folder_statck_id: state.currentFolder.id })
			}
		}

		const getChooseMaterial = (obj) => {
			state.currentMaterial = obj
		}

		const chooseLibrary = (item, index) => {
			if (state.currentIndex == index) return
			state.currentIndex = index
			state.showMaterial = false
			getFolderList(item)
		}

		const getCropper = (fileUrl) => {
			state.copperVisible = false
			state.currentMaterial['fileUrl'] = fileUrl
			context.emit('close', state.currentMaterial)
		}

		watch(() => props.visible, val => {
			if (val) {
				if (state.activeKey == 'merchant_materials') {
					getLibraryList(store.getters.clipJSON.merchant_library_id)
				} else {
					state.libraryList = []
					getFolderList({ merchant_library_id: 0 })
				}
			}
		})
		return {
			...toRefs(state),
			handleOk,
			handleClose,
			newSubFolder,
			closeAdd,
			handleTabChange,
			chooseFolder,
			chooseMaterial,
			closeMaterial,
			getChooseMaterial,
			chooseLibrary,
			getCropper
		}
	}
})
</script>

<style lang="less" scoped>
.merchant_materials {
	height: 500px;
	display: flex;

	.left_menu {
		height: 100%;
		width: 25%;
		border-right: 1px solid #eee;

		.menu_con {
			.menu_item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #666;
				font-size: 15px;
				cursor: pointer;
				margin-top: 5px;

				&.active {
					color: #2878FF;
				}
			}
		}
	}

	.right_material {
		height: 100%;
		width: 75%;
		padding: 0 20px;
		overflow-y: scroll;

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-track {
			width: 5px;
			background-color: transparent;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(193, 193, 193, 0.5);
			background-clip: padding-box;
			min-height: 28px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}
	}
}

.general_materials {
	height: 500px;
	width: 100%;

	.custom_upload {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		background: #f9f9f9 !important;
		border: 1px dashed #ddd;
		color: #696969;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		cursor: pointer;

		.upload_txt {
			margin-top: 5px;
		}
	}
}
</style>